<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="${_response_encoding}">
    <script src="@{'/public/javascripts/jquery-1.8.3.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/Class.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/AbstractShape.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/primitives/AbstractPrimitive.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/primitives/Point.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/primitives/Line.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/primitives/Polygon.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/primitives/Polyline.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/primitives/Rectangle.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/primitives/Ellipse.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/primitives/Circle.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/polygons/PredefinedPolygon.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/polygons/Triangle.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/polygons/Diamond.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/composites/Composite.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/composites/Arrow.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/customs/HTMLContainer.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/shapes/customs/uml/Clazz.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/drawers/AbstractDrawer.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/drawers/SVGDrawer.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <style>
        html, body{
            width:100%;
            height:100%;
            padding:0;
            margin:0;
        }
        svg{
            width:100%;
            height:100%;
            background:transparent url('@{'/public/images/grid.gif'}');
        }
        table.uml-clazz{
            font-family: Arial;
            font-size: 11px;
            background: white;
            border: 1px solid black;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            border-spacing: 0px;

        }
        table.uml-clazz td{
            padding: 5px;
        }
        table.uml-clazz tr.uml-clazz-name td{
            border-bottom: 1px solid black;
            text-align: center;
            font-weight: bold;
        }
        table.uml-clazz tr.uml-clazz-attributes td{
            border-bottom: 1px solid black;
        }
        table.uml-clazz tr td ul{
            padding:0;
            margin:0;
            list-style: none;
        }
        table.uml-clazz tr td ul li{
            white-space:nowrap;
        }
    </style>
    <script type="text/javascript">


        function test(){
            var drawer = new SVGDrawer(document.getElementById("workspace"));
            drawer.clearAll();
            drawer.removeAll();
            var r1Origin = new Point(100,20);
            var r2Origin = new Point(500,200);
            var r3Origin = new Point(500,20);
            var r4Origin = new Point(700,200);
            var r5Origin = new Point(950,200);

            var rectangle1 = new Rectangle(r1Origin, 100, 100);
            var rectangle2 = new Rectangle(r2Origin, 100, 100);
            var rectangle3 = new Rectangle(r3Origin, 100, 100);

            drawer.add(rectangle1,{"fill":"blue"});
            drawer.add(rectangle2);
            drawer.add(rectangle3);

            var circle1 = new Circle(r4Origin, 50);
            drawer.add(circle1);

            var ellipse1 = new Ellipse(r5Origin, 50, 100);

            drawer.add(ellipse1);

            var i1 = rectangle1.getIntersectionFromCenterToPoint(rectangle2.getCenter());
            var i2 = rectangle2.getIntersectionFromCenterToPoint(rectangle1.getCenter());
            var i3 = rectangle2.getIntersectionFromCenterToPoint(rectangle3.getCenter());
            var i4 = rectangle3.getIntersectionFromCenterToPoint(rectangle2.getCenter());
            var i5 = ellipse1.getIntersectionFromCenterToPoint(rectangle3.getCenter());
            var i6 = rectangle3.getIntersectionFromCenterToPoint(ellipse1.getCenter());

            var i7 = ellipse1.getIntersectionFromCenterToPoint(circle1.getCenter());
            var i8 = circle1.getIntersectionFromCenterToPoint(ellipse1.getCenter());

            drawer.add(i1);
            drawer.add(i2);
            drawer.add(i3);
            drawer.add(i4);
            drawer.add(i5);
            drawer.add(i6);
            drawer.add(i7);
            drawer.add(i8);
            var connector1 = new Line(i1, i2);
            var connector1 = new Arrow(i1, i2,new Triangle(),new Diamond())
            var connector2 = new Line(i3, i4);
            var connector3 = new Line(i5, i6);
            var connector4 = new Line(i7, i8);
            drawer.add(connector1,{"stroke":"red"});
            drawer.add(connector2);
            drawer.add(connector3);
            drawer.setAttribute(connector3,"stroke-dasharray","10,2");
            drawer.add(connector4,{"stroke":"yellow"});
            drawer.setAttribute(connector2, "stroke", "green");
            drawer.setAttributes(rectangle3, {"stroke":"green","fill":"white","onclick":"alert('test');"});
            drawer.setAttributes(circle1, {"stroke":"green","fill":"red"});

            drawer.draw();
        }

        function test2(){
            var drawer = new SVGDrawer(document.getElementById("workspace"));
            drawer.removeAll();
            drawer.clearAll();
            var origin1 = new Point(200,200);
            drawer.add(origin1);



            var triangle = new Triangle(origin1);

            triangle.rotate(-60);
            triangle.scale(2);
            drawer.add(triangle);
            var origin2 = new Point(400,200);
            drawer.add(origin2);

            var diamond= new Diamond(origin2);
            drawer.add(diamond,{"class":"diamond","stroke":"blue", "fill" : "white"});
            diamond.rotate(-90);

            var endArrow = new Triangle();
            var arrow1 = new Arrow(new Point(500,100), new Point(700,300), new Triangle(), endArrow);
            endArrow.scale(2);
            arrow1.setStartPolygon(new Diamond());
            arrow1.setStart(new Point(800,200));
            drawer.add(arrow1,{"stroke":"blue", "fill" : "white", "stroke-width":1.5});



            drawer.draw();

        }
        function test3(){
            var drawer = new SVGDrawer(document.getElementById("workspace"));
            drawer.removeAll();
            drawer.clearAll();
            var clazz = new Clazz(new Point(700,300),{
                name:"People",
                attributes:[
                    "+ id : Long",
                    "+ firstname : String"
                ],
                methods:[
                    "+ setName(String) : void"
                ]
            });

            var clazz2 = new Clazz(new Point(100,200),{
                name:"People",
                attributes:[
                    "+ id : Long",
                    "+ firstname : String"
                ],
                methods:[
                    "+ setName(String) : void"
                ]
            });

            drawer.add(clazz);
            drawer.add(clazz2);

            var i1 = clazz.getIntersectionFromCenterToPoint(clazz2.getCenter());
            var i2 = clazz2.getIntersectionFromCenterToPoint(clazz.getCenter());
            var diamond =  new Diamond();

            var arrow1 = new Arrow(i1,i2, new Triangle(), diamond);
            drawer.add(arrow1);
            diamond.scale(2);
            drawer.draw();

        }
    </script>
</head>
<body>
    <button onclick="test();">Test</button>
    <button onclick="test2();">Test 2</button>
    <button onclick="test3();">Test 3</button>
    <svg id="workspace" xmlns="http://www.w3.org/2000/svg" ></svg>
</body>
</html>